<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  input {
    display: block;
    width: 600px;
    height: 50px;
    padding: 0 20px;
    font-size: 20px;
    margin: 50px auto;
  }

  .message {
    width: 600px;
    margin: 0px auto;
    font-size: 30px;
    background-color: #ccc;
    padding: 10px 20px;
    color: red;
    height: 30px;
  }
</style>

<body>


  <input type="text" placeholder="请输入.." class="input">

  <div class="box">
  </div>

  <script>



    let box = document.querySelector('.box')

    let input = document.querySelector('input');
    function fan() {


      let html = ``;
      // 获取input的value
      let val = input.value;
      if (val) {
        html = `
          <div class="message">${val}</div>
        `
        box.innerHTML += html;
        input.value = '';
      }
    }

    // 防抖函数
    function debounce(func, wait) {
      let time = null;

      return function () {

        clearTimeout(time);

        time = setTimeout(() => {
          func()
        }, wait);

      }
    }

    input.oninput = debounce(fan, 1000)

  </script>

</body>

</html>